<template>
  <div class="backtop" @click="backtop" :style="{right:right+'px',bottom:bottom+'px'}" v-if="isShowBackTop">
    <i class="el-icon-arrow-up"></i>
  </div>
</template>
<style lang="less">
.backtop {
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 99999;
  color: #fff;
  width: 40px;
  height: 40px;
  background: #409eff;
  border-radius: 50px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
</style>
<script>
export default {
  name: "backtop",
  props: {
      right:{
          type: Number,
          default: 20,
      },
      bottom:{
          type: Number,
          default: 20,
      },
  },
  data() {
    return {
        isShowBackTop: false,
        scrollTop: 0,
    };
  },
  mounted(){
    this.checkDivScroolTop()
  },
  methods: {
    checkDivScroolTop(){
      let _this = this
      var scrollDiv = document.getElementById('scrollDiv');
      scrollDiv.addEventListener('scroll', function() {
        if(scrollDiv.scrollTop>400){
          _this.isShowBackTop = true
        }else{
          _this.isShowBackTop = false
        }
      });
    },
    // 点击回顶部事件
    backtop() {
      document.getElementById('scrollDiv').scrollTop = 0;
      this.isShowBackTop = false
    }
  },
};
</script>

